<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />

	<title>gvTooltip 1.0 - Custom Tooltips for the Google Visualization API</title>

	<link href='http://fonts.googleapis.com/css?family=Molengo&subset=latin' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Puritan:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
	<style type="text/css">
	@import url('demo/reset.css');
	@import url('demo/demo.css');
	@import url('demo/pretty_css3_buttons.css');
	</style>

	
	<!-- jQuery -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
	
	<!-- Google Visualization -->
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	
	<!-- gvTooltip -->
	<script type="text/javascript" src="gvTooltip.1.0.min.js" ></script>
	<link rel="stylesheet" href="gvTooltip.1.0.css" type="text/css">
	
</head>


<body>

	<div id="wrapper">
	
		<h3 style="float: right; color: #777;"><a href="http://kevinjantzer.com">By Kevin Jantzer</a></h3>
		<br/><br/><br/>
		<a class="button blue large" style="float: right; margin: 13px 0 0 10px;" href="http://code.google.com/p/gvtooltip/downloads/list">Download</a>
		<a class="button blue large" style="float: right; margin: 13px 0 0 0 ;" href="#demo">Demo</a>
		<h1 class="header">gvTooltip 1.0</h1>
		
		
		<br/><br/><br/><br/>
		
		
		<h4>A custom tooltip plugin for <a href="http://code.google.com/apis/visualization/documentation/gallery.html">Google Visualizations</a>.</h4>
		
		<p>gvTooltip has been created to add complete control over the very limited default tooltip provided in Google visualization charts. gvTooltip replaces the default tooltip with one that is completly customizable, letting you define what each tooltip says and how it looks.</p>
		
		<p>For downloads and more documentation, please head over to Google code: <a href="http://gvtooltip.googlecode.com" class="color">gvtooltip.googlecode.com</a></p>
		
		<p>gvTooltip currently works with the following charts:</p>
		
			<ul>
				<li>Line Chart</li>
				<li>Area Chart</li>
				<li>Bar Chart</li>
				<li>Column Chart</li>
				<li>Pie Chart <span>(still buggy with some options)</span></li>
			</ul>
		
		<div class="hr"></div>
		
		<h4>Options</h4>
		<p>gvTooltip can display a custom tooltip or can just remove the default Google chart tooltip. Here is a list of options for displaying a  custom tooltip</p>
		
			<ul class="options">
				<li>maxWidth - <span>maximum width the tooltip can grow to</span></li>
				<li>offsetLeft - <span>manual X offset</span></li>
				<li>offsetBottom - <span>manual Y offset</span></li>	
				<li>followMouse - <span>whether the tooltip should follow the mouse position</span></li>
				<li>position - <span>where the tooltip should be positioned relative to the mouse</span></li>
				<li>style - <span>class style to be applied to the tooltip.</span></li>
			</ul>
		
		
		<div class="hr"></div>
		
		<!-- Demo -->
		<h4 id="demo">Demo</h4>
		Position:
		<select onchange="updatePosition(this.value)">
			<option value="topLeft" >topLeft</option>
			<option value="topMiddle">topMiddle</option>
			<option value="topRight" selected>topRight</option>
			
			<option value="rightTop">rightTop</option>
			<option value="rightMiddle">rightMiddle</option>
			<option value="rightBottom">rightBottom</option>
			
			<option value="bottomRight">bottomRight</option>
			<option value="bottomMiddle">bottomMiddle</option>
			<option value="bottomLeft">bottomLeft</option>
			
			<option value="leftBottom">leftBottom</option>
			<option value="leftMiddle">leftMiddle</option>
			<option value="leftTop">leftTop</option>
		</select>
		Style:
		<select onchange="updateStyle(this.value)">
			<option value="" selected >None</option>
			<option value="clean" >Clean</option>
			<option value="dark" >Dark</option>
			<option value="blue">Blue</option>
			<option value="orange">Orange</option>
			<option value="green">Green</option>
		</select>
		Max Width:
		<select onchange="updateMaxWidth(this.value)">
			<option value="100px" >100px</option>
			<option value="150px" >150px</option>
			<option value="200px" selected >200px</option>
			<option value="250px" >250px</option>
			<option value="300px" >300px</option>
			<option value="350px">350px</option>
			<option value="400px">400px</option>
			<option value="450px">450px</option>
			<option value="500px">500px</option>
		</select>
		Type:
		<select onchange="updateChartType(this.value)">
			<option value="LineChart" selected >LineChart</option>
			<option value="AreaChart">AreaChart</option>
			<option value="BarChart">BarChart</option>
			<option value="ColumnChart">ColumnChart</option>	
		</select>
		<div id="gvTooltip_demo" class="graph"></div>
		
		<br/>
		<div id="gvTooltip_demo_pie" class="graph"></div>
	
	
		<div class="hr"></div>
	
		<br/>
		<p>Licensed under MIT. Have fun with this script, and please report any <a href="http://code.google.com/p/gvtooltip/issues/list" class="color">issues</a>!</p>
		<p><a href="http://kevinjantzer.com/2010/12/gvtooltip-1-0/" class="color">Back to blog posting</a></p>
		<br/>
	
	</div>
	
	
	
				<script type="text/javascript">
				google.load("visualization", "1", {packages:["corechart"]});
				
				var global_position = 'topRight';
				var global_style = '';
				var global_maxWidth = '200px';
				var global_chartType = 'LineChart';
				
				$(function(){
					drawChart();
					drawChartPie();
				});
				
				var chart;
				var data;
				
				function drawChart() {
					data = new google.visualization.DataTable();
					data.addColumn('string', 'Year');
					data.addColumn('number', 'Sales');
					
					data.addRows(4);
					data.setCell(0, 0, '2004');
					data.setCell(0, 1, 1000, '<span>1000<div id="gvTooltipData"><b>Year:</b> 2004<br/><b>Sales:</b> 1000</br><br/>gvTooltip lets you easily customize your Gooogle Visualizations.</div></span>');
					data.setCell(1, 0, '2005');
					data.setCell(1, 1, 1170, '<span>1000<div id="gvTooltipData"><b>Year:</b> 2005<br/><b>Sales:</b> 1170</br><br/>You can <b>add</b> any <em>type</em> of <span style="color: orange">HTML here.</span></div></span>');
					data.setCell(2, 0, '2006');
					data.setCell(2, 1, 860, '<span>1000<div id="gvTooltipData"><b>Year:</b> 2006<br/><b>Sales:</b> 860</br><br/><img src="http://weatherstation.uwinnipeg.ca/graph_icon3.jpg" /> Even images!</div></span>');
					data.setCell(3, 0, '2007');
					data.setCell(3, 1, 1030, '<span>1000<div id="gvTooltipData"><b>Year:</b> 2007<br/><b>Sales:</b> 1030</br><br/>gvTooltip supports several different positions and pre-defined styles. Styles can be easily added with CSS</div></span>');
					
					switch(global_chartType){
						case 'AreaChart':
							chart = new google.visualization.AreaChart(document.getElementById('gvTooltip_demo'));
							break;
						case 'BarChart':
							chart = new google.visualization.BarChart(document.getElementById('gvTooltip_demo'));
							break;
						case 'ColumnChart':
							chart = new google.visualization.ColumnChart(document.getElementById('gvTooltip_demo'));
							break;
						// LineChart
						default:
							chart = new google.visualization.LineChart(document.getElementById('gvTooltip_demo'));
							break;
					}
					
					
					chart.draw(data, {width: 598, height: 300, title: 'Default gvTooltip'});
					             
					
					var gvTooltipOptions = "{maxWidth: '"+global_maxWidth+"', position: '"+global_position+"', style: '"+global_style+"'}";
					 
					gvTooltip("gvTooltip_demo","data",chart,gvTooltipOptions);
				}
				
				

				function updatePosition(pos){
					global_position = pos;
				
					drawChart();
					drawChartPie();
				}
				
				
				function updateStyle(style){
					global_style = style;
				
					drawChart();
					drawChartPie();
				}
				
				function updateMaxWidth(width){
					global_maxWidth = width;
				
					drawChart();
					drawChartPie();
				}
				
				function updateChartType(type){
					global_chartType = type;
				
					drawChart();
				}
				
				
				
				
				var chart_pie;
				var data_pie;
				
				function drawChartPie() {
					data_pie = new google.visualization.DataTable();
					data_pie.addColumn('string', 'Year');
					data_pie.addColumn('number', 'Sales');
					
					data_pie.addRows(4);
					data_pie.setCell(0, 0, '2004');
					data_pie.setCell(0, 1, 1000, '<span>1000<div id="gvTooltipData"><b>Year:</b> 2004<br/><b>Sales:</b> 1000</br><br/>gvTooltip lets you easily customize your Gooogle Visualizations.</div></span>');
					data_pie.setCell(1, 0, '2005');
					data_pie.setCell(1, 1, 1170, '<span>1000<div id="gvTooltipData"><b>Year:</b> 2005<br/><b>Sales:</b> 1170</br><br/>You can <b>add</b> any <em>type</em> of <span style="color: orange">HTML here.</span></div></span>');
					data_pie.setCell(2, 0, '2006');
					data_pie.setCell(2, 1, 860, '<span>1000<div id="gvTooltipData"><b>Year:</b> 2006<br/><b>Sales:</b> 860</br><br/><img src="http://weatherstation.uwinnipeg.ca/graph_icon3.jpg" /> Even images!</div></span>');
					data_pie.setCell(3, 0, '2007');
					data_pie.setCell(3, 1, 1030, '<span>1000<div id="gvTooltipData"><b>Year:</b> 2007<br/><b>Sales:</b> 1030</br><br/>gvTooltip supports several different positions and pre-defined styles. Styles can be easily added with CSS</div></span>');
					
					chart_pie = new google.visualization.PieChart(document.getElementById('gvTooltip_demo_pie'));
					chart_pie.draw(data_pie, {width: 598, height: 300, legend: 'none'});
					             
					
					var gvTooltipOptions = "{maxWidth: '"+global_maxWidth+"', position: '"+global_position+"', style: '"+global_style+"', followMouse: true}";
					 
					gvTooltip("gvTooltip_demo_pie","data_pie",chart_pie,gvTooltipOptions);
				}
				

				</script>
			
</body>
</html>